<template>

  <!-- 对阵图 -->
  <el-scrollbar wrap-class="scrollbar-wrapper gl_dialog_height" style="width: 100%;">
    <el-alert v-if="isOverNums" style="margin-bottom:10px;" center title="由于编排后增加新人，比赛模型和参赛人数不符，请清空本小项编排后，重新抽签" type="warning" />
    <div v-for="(item, index) in returnAgainstData" :key="'first' + index">
      <h4 v-if="item.Code !== 'FNL'">{{ item.Code }}</h4>
      <template v-if="item.Code === 'FNL'">
        <div :style="{ width: (item.BracketItems.length * 280 + 300) + 'px', overflow: 'auto' }">
          <div class="left_box">
            <div class="title">编号:</div>
            <div class="list_box">
              <div v-for="(qtem, qndex) in leftData" :key="qndex" class="list_box_item">
                <span class="title">{{ qtem.lotNumber }}号签: </span>
                <span class="text gl_ellipsis" :title="(qtem.competitionRegisterName || '请选择运动员') + (qtem.delegationName ? '(' +qtem.delegationName+')' : '')">
                  {{ qtem.competitionRegisterName || '请选择运动员' }}{{ qtem.delegationName ? '(' +qtem.delegationName+')' : '' }}
                </span>
              </div>
            </div>
          </div>
          <div class="right_box">
            <template v-for="(jtem, jndex) in item.BracketItems">
              <div v-if="jtem.BracketItem && jtem.BracketItem.length > 0" :key="'second' + jndex + jtem.Code" class="gl_fl gl_brackets_item">
                <div class="gl_brackets_title">{{ jtem.Code }}</div>
                <div class="gl_brackets_content">
                  <div v-for="(ltem, lndex) in jtem.BracketItem" :key="'third' + lndex + ltem.Code" class="gl_brackets_third">
                    <div v-for="(ktem, kndex) in ltem" :key="'fourth' + kndex + ktem.lotNumber" :data-key="ktem.MarginTop" :style="{'margin-top': ktem.MarginTop / 2 + 'px'}">
                      <div class="gl_bracketItem_place">
                        <div class="homeBox" style="position: relative; height: 50px; line-height: 50px;">
                          <span style="width: 20px;display: inline-block;text-align: ;">{{ ktem.CompetitorPlace[0].lotNumber }}</span>
                          <el-avatar shape="circle" size="medium" style="vertical-align: middle;" :src="getStaticAvatarUrl(ktem.CompetitorPlace[0].avatar)" />
                          <div class="name gl_ellipsis" :title="(ktem.CompetitorPlace[0].competitionRegisterId ? ktem.CompetitorPlace[0].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空') + (ktem.CompetitorPlace[0].delegationName ? '(' + ktem.CompetitorPlace[0].delegationName + ')' : '')">
                            <span>{{ ktem.CompetitorPlace[0].competitionRegisterId ? ktem.CompetitorPlace[0].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空' }}</span>
                            <span>{{ ktem.CompetitorPlace[0].delegationName ? '(' + ktem.CompetitorPlace[0].delegationName + ')' : '' }}</span>
                          </div>
                        </div>
                        <div style="position: relative; height: 50px; line-height: 50px;">
                          <span style="width: 20px;display: inline-block;">{{ ktem.CompetitorPlace[1].lotNumber }}</span>
                          <el-avatar shape="circle" size="medium" style="vertical-align: middle;" :src="getStaticAvatarUrl(ktem.CompetitorPlace[1].avatar)" />
                          <div class="name gl_ellipsis" :title="(ktem.CompetitorPlace[1].competitionRegisterId ? ktem.CompetitorPlace[1].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空') + (ktem.CompetitorPlace[1].delegationName ? '(' + ktem.CompetitorPlace[1].delegationName + ')' : '')">
                            <span>{{ ktem.CompetitorPlace[1].competitionRegisterId ? ktem.CompetitorPlace[1].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空' }}</span>
                            <span>{{ ktem.CompetitorPlace[1].delegationName ? '(' + ktem.CompetitorPlace[1].delegationName + ')' : '' }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 铜牌赛 -->
                <div v-if="jtem.Code === '决赛' && eventFormat" class="gl_brackets_title" style="margin-top: 86px;">{{ '铜牌赛' }}</div>
                <div v-if="jtem.Code === '决赛' && eventFormat" class="gl_brackets_content">
                  <div v-for="(ltem, lndex) in jtem.BracketItem" :key="'third' + lndex + ltem.Code" class="gl_brackets_third">
                    <div v-for="(ktem, kndex) in ltem" :key="'fourth' + kndex + ktem.lotNumber" :data-key="ktem.MarginTop" style="margin-top: 18px;margin-bottom: 18px;">
                      <div class="gl_bracketItem_place">
                        <div class="homeBox" style="position: relative; height: 50px; line-height: 50px;">
                          <span style="width: 20px;display: inline-block;text-align: ;">{{ ktem.CompetitorPlace[0].lotNumber }}</span>
                          <el-avatar shape="circle" size="medium" style="vertical-align: middle;" :src="getStaticAvatarUrl(ktem.CompetitorPlace[0].avatar)" />
                          <div class="name gl_ellipsis" :title="(ktem.CompetitorPlace[0].competitionRegisterId ? ktem.CompetitorPlace[0].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空') + (ktem.CompetitorPlace[0].delegationName ? '(' + ktem.CompetitorPlace[0].delegationName + ')' : '')">
                            <span>{{ ktem.CompetitorPlace[0].competitionRegisterId ? ktem.CompetitorPlace[0].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空' }}</span>
                            <span>{{ ktem.CompetitorPlace[0].delegationName ? '(' + ktem.CompetitorPlace[0].delegationName + ')' : '' }}</span>
                          </div>
                        </div>
                        <div style="position: relative; height: 50px; line-height: 50px;">
                          <span style="width: 20px;display: inline-block;">{{ ktem.CompetitorPlace[1].lotNumber }}</span>
                          <el-avatar shape="circle" size="medium" style="vertical-align: middle;" :src="getStaticAvatarUrl(ktem.CompetitorPlace[1].avatar)" />
                          <div class="name gl_ellipsis" :title="(ktem.CompetitorPlace[1].competitionRegisterId ? ktem.CompetitorPlace[1].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空') + (ktem.CompetitorPlace[1].delegationName ? '(' + ktem.CompetitorPlace[1].delegationName + ')' : '')">
                            <span>{{ ktem.CompetitorPlace[1].competitionRegisterId ? ktem.CompetitorPlace[1].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空' }}</span>
                            <span>{{ ktem.CompetitorPlace[1].delegationName ? '(' + ktem.CompetitorPlace[1].delegationName + ')' : '' }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </template>
          </div>
        </div>
      </template>
      <template v-else>
        <div :style="{ width: item.BracketItems.length * 260 + 'px' }">
          <template v-for="(jtem, jndex) in item.BracketItems">
            <div v-if="jtem.BracketItem && jtem.BracketItem.length > 0" :key="'second' + jndex + jtem.Code" class="gl_fl gl_brackets_item">
              <div class="gl_brackets_title">{{ jtem.Code }}</div>
              <div class="gl_brackets_content">
                <div v-for="(ltem, lndex) in jtem.BracketItem" :key="'third' + lndex + ltem.Code" class="gl_brackets_third">
                  <div v-for="(ktem, kndex) in ltem" :key="'fourth' + kndex + ktem.lotNumber" :data-key="ktem.MarginTop" :style="{'margin-top': ktem.MarginTop / 2 + 'px'}">
                    <div class="gl_bracketItem_place">
                      <div class="homeBox" style="position: relative; height: 50px; line-height: 50px;">
                        {{ ktem }}
                        <span class="gl_pr_10">{{ ktem.CompetitorPlace[0].lotNumber }}</span>
                        <el-avatar shape="circle" size="medium" style="vertical-align: middle;" :src="getStaticAvatarUrl(ktem.CompetitorPlace[0].avatar)" />
                        <div class="name gl_ellipsis" :title="(ktem.CompetitorPlace[0].competitionRegisterId ? ktem.CompetitorPlace[0].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空') + (ktem.CompetitorPlace[0].delegationName ? '(' + ktem.CompetitorPlace[0].delegationName + ')' : '')">
                          <span>{{ ktem.CompetitorPlace[0].competitionRegisterId ? ktem.CompetitorPlace[0].competitionRegisterName : jndex !== 0 ? '获胜者' : '轮空' }}</span>
                          <span>{{ ktem.CompetitorPlace[0].delegationName ? '(' + ktem.CompetitorPlace[0].delegationName + ')' : '' }}</span>
                        </div>
                      </div>
                      <div style="position: relative; height: 50px; line-height: 50px;">
                        <span class="gl_pr_10">{{ ktem.CompetitorPlace[1].lotNumber }}</span>
                        <el-avatar shape="circle" size="medium" style="vertical-align: middle;" :src="getStaticAvatarUrl(ktem.CompetitorPlace[1].avatar)" />
                        <div class="name gl_ellipsis" :title="(ktem.CompetitorPlace[1].competitionRegisterId ? ktem.CompetitorPlace[1].competitionRegisterName : '') + (ktem.CompetitorPlace[1].delegationName ? '(' + ktem.CompetitorPlace[1].delegationName + ')' : '')">
                          <span>{{ ktem.CompetitorPlace[1].competitionRegisterId ? ktem.CompetitorPlace[1].competitionRegisterName: '' }}</span>
                          <span>{{ ktem.CompetitorPlace[1].delegationName ? '(' + ktem.CompetitorPlace[1].delegationName + ')' : '' }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
  </el-scrollbar>
</template>
<script>
export default {
  name: 'AgainstPlan',
  props: {
    testData: {
      required: true,
      type: Array,
      default() {
        return [];
      }
    },
    isOverNums: {
      type: Boolean,
      default: false
    },
    eventFormat: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      againstData: [],
      returnAgainstData: [],
      leftData: [], // 左侧编号数据
      height: {
        evenBaseMt: 40, // 偶数 margin-top
        oddBaseMt: 24, // 奇数 margin-top
        modelH: 200 // 模块高度 height
      }
    };
  },
  watch: {
    testData: {
      handler() {
        this.processTestData();
      }
    }
  },
  mounted() {
    this.processTestData();
  },
  methods: {
    processTestData() {
      const _testData = {
        'Code': 'FNL',
        'BracketItems': [
          {
            Code: '',
            BracketItem: []
          }
        ]
      };
      this.leftData = JSON.parse(JSON.stringify(this.testData));
      // 排序
      this.leftData.sort((a, b) => a.lotNumber - b.lotNumber);
      console.log('111', this.leftData);
      for (var i = 0; i < this.testData.length; i += 2) {
        const _code = `1/${this.testData.length / 2}`;
        const _CompetitorPlace = this.testData.slice(i, i + 2);
        _testData['BracketItems'][0].Code = _code === '1/1' ? '决赛' : _code;
        _testData['BracketItems'][0]['BracketItem'].push({
          CompetitorPlace: _CompetitorPlace
        });
      }
      let _num = this.testData.length;
      while (_num > 1) {
        _num = _num / 2;
        // 处理除抽签之外的空数据渲染
        const _data = this.processOtherData(_num, _num / 2);
        _testData['BracketItems'].push(_data);
      }
      this.againstData = [_testData];
      this.processData();
    },
    processOtherData(num, len) {
      const mockData = {
        'eventId': '',
        'delegationId': '',
        'registerId': '',
        'competitionRegisterName': '',
        'delegationName': '',
        'registerIdCardNumber': '',
        'registerPhoneNumber': '',
        'lotNumber': null,
        'avatar': '',
        'competitionRegisterId': ''
      };
      const _BracketItem = [];
      if (num > 1) {
        num = num / 2;
        while (num) {
          num = num - 1;
          _BracketItem.push({
            CompetitorPlace: [
              mockData,
              mockData
            ]
          });
        }
      }
      return {
        Code: len === 1 ? '决赛' : `1/${len}`,
        BracketItem: _BracketItem
      };
    },
    processData() {
      this.returnAgainstData = [];
      for (var i = 0; i < this.againstData.length; i++) {
        var item = this.againstData[i];
        var _returnBracketItems = [];
        for (var j = 0; j < item.BracketItems.length; j++) {
          var jtem = item.BracketItems[j];
          for (var k = 0; k < jtem.BracketItem.length; k++) {
            var ktem = jtem.BracketItem[k];
            ktem.MarginTop = this.calcFuncSimple(j, k);
            ktem.DateTime = (ktem.Date || '') + ' ' + (ktem.Time || '');
          }
          _returnBracketItems.push(jtem);
        }
        _returnBracketItems.sort(function(a, b) {
          return b.BracketItem.length - a.BracketItem.length;
        });
        for (let m = 0; m < _returnBracketItems.length; m++) {
          const mtem = _returnBracketItems[m];
          var arr = [];
          while (mtem.BracketItem.length) {
            arr.push(mtem.BracketItem.splice(0, 2));
          }
          mtem.BracketItem = arr;
        }

        item.BracketItems = _returnBracketItems;
        this.returnAgainstData.push(item);
        console.log(this.returnAgainstData);
      }
    },
    calcFuncSimple(i, j) {
      var _marginTop = 0;
      var _modelH = this.height.modelH;
      var _oddBaseMt = this.height.oddBaseMt;
      var _evenBaseMt = this.height.evenBaseMt;
      // 第一列
      if (i === 0) {
        if (j % 2 === 0) {
          _marginTop = _evenBaseMt;
        } else {
          _marginTop = _oddBaseMt;
        }
      } else {
        if (j === 0) {
          _marginTop = ((Math.pow(2, i) - 1) * _modelH + _oddBaseMt * Math.pow(2, i - 1) + _evenBaseMt * ((i - 1) || 0)) / 2 + _evenBaseMt;
        } else {
          _marginTop = ((Math.pow(2, i) - 1) * _modelH + _oddBaseMt * Math.pow(2, i - 1) + _evenBaseMt * ((i - 1) || 0)) + _evenBaseMt;
        }
      }
      return _marginTop;
    },
    // 头像回显
    getStaticAvatarUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.gl_brackets_third {
  position: relative;
}
.gl_brackets_third::after {
  content: "";
  display: block;
  position: absolute;
  right: -20px;
  top: 50px;
  bottom: 50px;
  width: 1px;
  background: #000;
}

.gl_brackets_item {
  margin-right: 40px;
  .gl_brackets_title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
  }
  .gl_brackets_content {
    position: relative;
    .el-avatar::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 235px;
      height: 1px;
      background: red;
    }
    .homeBox .el-avatar::after {
      content: "";
      background: rgb(12, 46, 240);
    }
  .name {
      float: right;
      width: 235px;
      line-height: 30px;
      padding: 0 5px;
      box-sizing: border-box;
    }
  }
  .gl_bracketItem_place {
    position: relative;
  }
  .gl_bracketItem_place {
    position: relative;
  }
  .gl_bracketItem_place::before {
      content: "";
      position: absolute;
      right: -20px;
      top: 50%;
      width: 20px;
      height: 1px;
      background: #000;
  }
  .gl_bracketItem_place::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25px;
    width: 1px;
    height: 50px;
    background: #000;
  }
}
.left_box{
  width: 260px;
  min-height: 400px;
  float: left;
  border-right: 1px solid #ddd;
  margin-right: 20px;
  .title{
    font-weight: 700;
    font-size: 16px;
  }
  .list_box{
    padding: 20px;
    .list_box_item{
      line-height: 30px;
      .title{
        font-weight: 400;
        font-size: 14px;
        width: 30%;
        display: inline-block;
        text-align: right;
        box-sizing: border-box;
        padding-right: 10px;
        vertical-align: middle;
      }
      .text{
        width: 70%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
.right_box{
  float: left;
}
</style>
